<template>
	<view class="pageBox">
		<loading v-if="loading"></loading>
		<view v-else>
			
		
		<view class="top-background" v-if="platfrom!=='TOUTIAO'"></view>
		<view class="status_nav" v-if="platfrom!=='TOUTIAO'" :style="'height:' + statusBarHeight + 'px;'" :class="{'backClass':scrollFlag}"></view>
		<view v-if="platfrom!=='TOUTIAO'" :class="{'backClass':scrollFlag}" :style="'height:'+ titleBarHeight +'px;line-height:'+ titleBarHeight + 'px;top:'+statusBarHeight+'px;'" class="Index_tab_top">
			<view class="scan-box">
				<!-- <image src="../../static/mine/img1.png" mode="aspectFill" @click="WeixinServer()"></image> -->
			</view>
			<view class="title">分销中心</view>
		</view>
		<view v-if="platfrom!=='TOUTIAO'" :style="'height:'+ (titleBarHeight+statusBarHeight) +'px;'"></view>
		<view v-if="platfrom!=='TOUTIAO'" :style="'width: 100vw;height:'+ (titleBarHeight+statusBarHeight +175)+'px;position: fixed;top: 0;z-index:-1;'">
			
		</view>
		
		<!-- 个人信息 -->
		<view class="information">
			<view class="dw"  @click="sharePoster()">
				<image src="https://imgs.ynz666.com/2025/05/20/ZWE4YjY4MDY2MjI2NDMxZmRiYjg4Y2E1MTA5ZTY2Y2E=.png" mode="aspectFill" class="dw_img"></image>
				<view class="dw_name">分享</view>
			</view>
			<view class="left" v-if="mineInfo.mobile">
				<image :src="mineInfo.avatar" mode="aspectFill" class="img"></image>
				<view class="detail">
					<view class="name">
						{{mineInfo.nickname}}
					</view>
					<view class="desc">
					</view>
				</view>
			</view>
			
			<view class="left" v-if="!mineInfo.mobile">
				<image src="https://imgs.ynz666.com/test/2025/01/08/MzQ3MGEyMWE3NzYwNmM4N2Y2M2VjNGRkZWJhNGNhMzA=.png" mode="aspectFill" class="img"></image>
				<view class="detail">
					<view class="name">
						欢迎你来
					</view>
					<view class="desc">
						开启商圈消费新方式，消费省钱还赚钱
					</view>
				</view>
			</view>
			
			<!-- <view class="right">
				<view v-if="!mineInfo.mobile">
					登录
				</view>
				<button v-if="!mineInfo.mobile && mineInfo.mobile.length!==11" open-type="getPhoneNumber" @getphonenumber.stop="onGetPhoneNumber"></button>
			</view> -->
		</view>
		
		
		<!-- 身份信息 -->
		<view class="identity">
			<image src="https://imgs.ynz666.com/2025/05/15/YmY4NDM3OGJkMTBkYWViZTU2NTY2ZjIwNjQ2NzMwMjI=.png" mode="aspectFill" class="identity_img"></image>
			<view class="identity_box">
				<view class="dw">
					<text v-for="(itemA,indexA) in distribution.identity" :key="indexA">
					<text class="text_right fontText" v-if="indexA==0">{{itemA}}</text>
					<text class="text_right" v-if="indexA!=0">{{itemA}}</text>
					<text class="text_xhx" v-if="indexA!==distribution.identity.length-1">|</text>
					
					</text>
				</view>
				<view class="top">
					<view class="top_left">
						<view class="name">
							总金额(元)
						</view>
						<view class="price">
							{{distribution.totalAmount}}
						</view>
					</view>
					<view class="top_right">
						
					</view>
				</view>
				<view class="cen">
					<view class="item">
						<view class="name">
							可提现(元)
						</view>
						<view class="price">
							{{distribution.withdrawableAmount}}
						</view>
					</view>
					<!-- <view class="item">
						<view class="name">
							奖励金(元)
						</view>
						<view class="price">
							{{distribution.rewardAmount}}
						</view>
					</view> -->
					<view class="item">
						<view class="name">
							已提现(元)
						</view>
						<view class="price">
							{{distribution.withdrawnAmount}}
						</view>
					</view>
				</view>
				<view :class="mineInfo.confirmOrderId>0?'fot':'fot fotT'">
					<view class="btn fot_left" v-if="mineInfo.confirmOrderId>0" @click="modifyOrder()">
						确认收货
					</view>
					<view class="btn fot_right" @click="openPage('withdraw',2)">
						我的钱包
					</view>
				</view>
			</view>
		</view>
		
		<!-- 主要功能 -->
		<view class="main_one">
			<view class="item left" @click="openPage('commission',2)">
				<image src="https://imgs.ynz666.com/2025/05/15/YTlhYzFjYTI4YWMzYjM3ODM0NjA0MjE2NDM1ZTFlNmQ=.png" mode="aspectFill" class="img"></image>
				<view class="left_box">
					<view class="price">
						{{distribution.commissionIncome}}
					</view>
					<view class="name">
						累计佣金(元)
					</view>
				</view>
			</view>
			<view class="item right" @click="openPage('teamSize',2)">
				<image src="https://imgs.ynz666.com/2025/05/15/ZDA1N2NmMzgyNmIzZDk4YjNiZWRkMTcwMjZiMzY2OGU=.png" mode="aspectFill" class="img"></image>
				<view class="left_box">
					<view class="price">
						{{distribution.teamCount}}
					</view>
					<view class="name">
						团队人数(人)
					</view>
				</view>
			</view>
		</view>
		
		<!-- 规则 -->
		<view class="main_rule" @click="openRule()">
			<image src="https://imgs.ynz666.com/2025/06/26/N2JhNjE4Njc3YTE2ZjA4MWYzODFkYmMwMDkyMTViODA=.jpeg" mode="aspectFill" class="img"></image>
		</view>
		
		<view class="main_two">
			<view class="item" @click="jumpIdentityInfo(navOneList[0].id,1)">
				<image src="https://imgs.ynz666.com/2025/05/15/NWRiYzAzOTQ1N2ZlYTZhOWRhOWFkMmVlYTgxNGFlNTA=.png" mode="aspectFill" class="img"></image>
				<view class="item_box">
					<view class="name">
						升级销氪礼包
					</view>
					<view class="price">
						<text class="price_v1">¥</text>
						<text class="price_v2">{{navOneList[0].price}}</text>
						
					</view>
					<view class="desc">
						赚更多分销佣金
					</view>
				</view>
			</view>
			<view class="item" @click="jumpIdentityInfo(navOneList[1].id,2)">
				<image src="https://imgs.ynz666.com/2025/05/15/NTVmZTkwNDg3YjhiNjExMDRjYzE5ZTZkODc0Y2FhYmI=.png" mode="aspectFill" class="img"></image>
				<view class="item_box">
					<view class="name nameT">
						升级服务商礼包
					</view>
					<view class="price">
						<text class="price_v1">¥</text>
						<text class="price_v2">{{navOneList[1].price}}</text>
						
					</view>
					<view class="desc">
						做团队赚更多佣金
					</view>
				</view>
			</view>
		</view>
		
		<view class="main_thr">
			<view class="item" @click="openPage('agentInfo',3)">
					<image src="https://imgs.ynz666.com/2025/05/15/N2I1ODkyNzExODBkYzMyOGNhYjk1YjIzNGVhODkwNzQ=.png" mode="aspectFill" class="img"></image>
					<view class="name">
						身份升级介绍
					</view>
			</view>
			<!-- <view class="item">
					<image src="https://imgs.ynz666.com/2025/05/15/N2UxZTk4YjM3ZTczMWJjMDhiNDliODQyNWM4YjdmZjg=.png" mode="aspectFill" class="img"></image>
					<view class="name">
						团队收益排名 5
					</view>
			</view> -->
			<view class="item" @click="openPage('commission',2)">
					<image src="https://imgs.ynz666.com/2025/05/15/MzdkMDFlY2MyNGU5MDc3NjE5NjdiZDc0NmQ5NzQ4OTE=.png" mode="aspectFill" class="img"></image>
					<view class="name">
						佣金订单
					</view>
			</view>
			<!-- <view class="item">
					<image src="https://imgs.ynz666.com/2025/05/15/ODE1N2ZhYjVkYmZjNWRiM2JlYzIyZTk0MTc0OWMzZGM=.png" mode="aspectFill" class="img"></image>
					<view class="name">
						上传商户
					</view>
			</view> -->
		</view>
		
		<!-- 活动海报分享 -->
		<painter :palette="template" @imgOK="onImgOK" :widthPixels='1200'
			style='width:;height: ;position: absolute; left: -9999rpx;' />
		<!-- 活动海报分享 -->
		<view class="mask" v-if="showPoster" @click="closeMask">
			<view class="mask_box">
			<image class="poster" :src="imagePath" mode="widthFix"></image>
			<view class="down_box1">
				<view class="box_btn1">
					<text>分享好友</text>
					<button open-type="share" id="placard"></button>
				</view>
				<view class="box_btn2" @tap.stop="saveImg">
					保存本地
				</view>
			</view>
			<view class="fot">
				<image
					src="https://imgs.ynz666.com/2023/12/04/NTZkZTQ5MmVlYTQxODdkMzE3ZDZjNTE0OTg2NGFjZmQ=.png"
					mode="scaleToFill" class="img" @click="closeOpenRedPacket"></image>
			</view>
			</view>
			
			
		</view>
		
		
		<!-- 标准版确认取消弹框 -->
		<view class="mask_Verify" v-if="modalVerify">
			<view class="maskFour_box">
				<view class="bj_box">
						<view class="box">
						  <view class="box_title">
						  	确认收货吗
						  </view>
							<view class="box_con">
							  收货确认后，将拥有新的身份
							</view>
							
							<view class="box_font">
								<view class="btn btn1" @click="cancelDelete()">
									关闭弹框
								</view>
								<view class="btn btn2" @click="verifyDelete()">
									确认收货
								</view>
							</view>
						</view>
				</view>
			</view>
		</view>
		
		
		
		
		
		<view class="rulemask" v-if="ruleModal">
			<view class="ruleModal_box">
				<view class="fri_box">
					<view class="top">
						分销中心规则
					</view>
					<view class="bot">
						<view>
							1.分享小程序可绑定新用户，有机会赚取佣金
							以下情况无法绑定
							·若该用户已经被别人锁定则无法绑定
							·若该用户有绑定其他用户则无法绑定
						</view>
						<view>
							2.所有身份均可以推广锁定用户
						</view>
						<view>
							3.身份为会员及以上开始享受分销佣金，等级越高收益越高
							·会员权益
							绑定用户成为会员佣金
							分享团购用户下单佣金
							·销氪权益
							绑定用户成为会员佣金
							绑定用户/会员成为销氪佣金
							绑定用户/会员成为服务商佣金
							绑定商品用户下单30%-60%收益
							赠送额外平台月卡
							·服务商权益
							绑定用户成为会员佣金
							绑定用户/会员成为销氪佣金
							绑定用户/会员成为服务商佣金
							绑定商品用户下单30%-60%收益
							赠送额外平台月卡
							团队成员销氪收益10%佣金
						</view>
						<view>
							4.查询锁定用户
							可通过用户昵称/电话搜索
							平台方不会泄露用户的跟人信息及电话号码
							若需通过电话号码查询需自己询问被锁定的用户
							若用户未绑定电话号码可通过昵称查询
							若查询不到，则未绑定成功可以查看第一条规则
						</view>
						<view>
							5.佣金订单
							每笔佣金订单平台将收取10%的技术服务费，到佣金订单时已扣除完毕
						</view>
						<view>
							6.提现
							提现时间为T+1到账
							提现流程：分销中心--我的钱包--输入提现金额--立即提现--平台审核--确认提现--微信零钱
						</view>
						
					</view>
					
				</view>
				
				<view class="fot">
					<image src="https://imgs.ynz666.com/test/storeInfo/ZTRjZjcwYWY2MWJlMDlmNjIyMTBhMGE5ODc2YWUwOWM=.png" mode="aspectFill" class="img" @click="closeMask"></image>
				</view>
			</view>
		</view>
		
		<customTabbar :curNav="2" :bottomTabbar='bottomTabbar' :saleView='mineInfo.saleView'></customTabbar>
		
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import {
		getSecKillList,
	} from '../../apis/index.js';
	import {
		apiPointSeuityList,apiOperationMemberCard,apiMiniProgramQrCode,apiOrderStatus
	} from '../../apis/my.js';
	
	import painter from '@/wxcomponents/painter/painter';
	import customTabbar from '../../components/custom-tabbar/custom-tabbar.vue';
	import loading from '../../components/loading/loading.vue';
	
	export default {
		data() {
			return {
				loading:true,
				statusBarHeight: 0,
				titleBarHeight: 0,
				bottomTabbar: 0,
				mineInfo:{},
				distribution:{},
				scrollFlag:false,
				latitude: 0,
				longitude: 0,
				ruleModal:false,
				
				purchaseList:[
					{
						img:'',
						name:'徐点点不滴',
					  shop:'一点点经典口味波霸奶绿大杯'
					},
					{
						img:'',
						name:'刘打打飞',
					  shop:'明星不错大大大一样'
					}
				],//购买人轮播信息
				
				currentBanner:0,
				currentplat:0,
				likeAllList:[],//会员免费列表
				
				navOneList:[],
				
				codeimg: '',//分享码
				imagePath: '',
				showPoster: false,
				template: {},
				modalVerify:false,
			}
		},
		components: {
			customTabbar,
			loading,
			painter,
		},
		onPageScroll(e){
			if(e.scrollTop>0){
				this.scrollFlag = true;
			}
			if(e.scrollTop<=0){
				this.scrollFlag = false;
			}
		},
		onShow() {
			uni.hideTabBar();
			this.getUserInfo();
			
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			
		},
		onShareAppMessage(res) {
			let that=this
			// let title = this.nickName+'邀请你一起免费兑换 |'+this.store.name
			// if(res.target.id=="placard"){
				console.log(that.mineInfo.id,"that.mineInfo.id")
				return {
					title: '邀请你加入下楼休闲吧',
					imageUrl : '',
					path: `/pages/index/index?inviteId=${that.mineInfo.id}`
				}
			// }
		},
		onLoad(){
			let that = this;
			that.latitude = app.globalData.latitude;
			that.longitude = app.globalData.longitude;
			
			app.isLogin({},function(login){
			 console.log(login,"login")
			 that.mineInfo = login;
			 that.distribution=login.distribution
			 that.operationMemberCard();
			 that.QrcodeMed();
			})
			// this.QrcodeMed();
			
		},
		
		onReady() {
			uni.hideTabBar();
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 + uni
				.getMenuButtonBoundingClientRect().height;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
		},
		methods: {
			
			cancelDelete(){
				this.modalVerify=false
			},
			modifyOrder(){
				this.modalVerify=true
			},
			verifyDelete(){
				let that = this;
				let data={
					id:that.mineInfo.confirmOrderId,
					status:3
				}
				apiOrderStatus(data).then(res=>{
					if(res.code==0){
						that.getUserInfo();
						that.modalVerify=false
						uni.showToast({
							title:'确认收货成功',
							icon:'none'
						})
					}
					
				})
			},
			openRule(){
				this.ruleModal = true;
			},
			// 关闭海报弹框
			closeMask() {
				this.showPoster = false;
				this.ruleModal = false;
			},
			// 获取逍客价格列表
			operationMemberCard(){
				apiOperationMemberCard({show:"agent"}).then(res=>{
					this.navOneList=res.data.list
					this.loading=false
				})
			},
			// 手机号授权
			onGetPhoneNumber(e){
				console.log(e,"eeeee")
				let that = this;
				app.GetMobile(e,function(e){
					
					that.getUserInfo();
					
				});
			},
			onGetPhoneNumberTwo(e){
				let that = this;
				app.GetMobile(e,function(e){
					
				
				});
			},
			jumpIdentityInfo(id,type){
				uni.navigateTo({
					url: `/pageB/giftBagInfo/giftBagInfo?cardId=${id}&type=${type}`
				})
				// uni.navigateTo({
				// 	url: `/pageB/identityInfo/identityInfo?cardId=${id}&type=${type}`
				// })
			},
			getUserInfo() {
				let that = this;
				app.getUserInfo(function(lRes) {
					that.mineInfo = lRes;
					that.distribution=lRes.distribution
					that.loading=false
					uni.setStorageSync('mineInfo', lRes);
				})
			},
			openPage(page, index) {
				switch (index) {
					case 1:
						uni.navigateTo({
							url: `/pages/${page}/${page}`
						})
						break;
					case 2:
						uni.navigateTo({
							url: `/pageB/${page}/${page}`
						})
						break;
					case 3:
						uni.navigateTo({
							url: `/pageC/${page}/${page}`
						})
						break;
					case 4:
							uni.navigateTo({
								url: `/pageD/${page}/${page}`
							})
							break;
					default:
						break;
				}
			
			},
			
			// 跳转
			JumpPage(page) {
				switch (page) {
					case 'index':
						uni.switchTab({
							url: '/pages/' + page + '/' + page
						})
						break;
					default:
						uni.navigateTo({
							url: `../${page}/${page}`
						})
						break;
				}
			},
			// 生成小程序码
			QrcodeMed() {
				let that = this;
				// http.post('/api/platform/v1/sale/info').then(info => {
					// if (info.data.saleId) {
						// that.saleId = info.data.saleId;
						console.log(that.mineInfo.id,"that.mineInfo.id")
						let data = {
							path: 'pages/index/index',
							width: 150,
							isHyaline: false,
							type: 0,//1 售卡码  2团购列表码   8销售首页码
							scene: `inviteId=${that.mineInfo.id}`,
							sourceId: "1"
						}
						apiMiniProgramQrCode(data).then(res=>{
							let qrUrl = 'https://imgs.ynz666.com/' + res.data.qrCodeUrl
							that.codeimg = qrUrl;
						})
						
						// http.post('/api/user/v1/qrCode', data).then(code => {
						// 	let qrUrl = 'https://imgs.ynz666.com/' + code.data.qrCodeUrl
						// 	that.codeimg = qrUrl;
							
						// })
					// }
				// }).catch(error => {})
			},
			// 分享海报
			sharePoster() {
				this.handleStartDrawImg();
				this.showPoster = true;
				
			},
			closeOpenRedPacket(){
				this.showPoster = false;
			},
			// 保存到相册
			saveImg() {
				let that = this;
				app.photosAblum(function() {
					uni.saveImageToPhotosAlbum({
						filePath: that.imagePath,
						success(down) {
							uni.hideLoading();
							that.showPoster = false;
							uni.showToast({
								title: '图片保存成功',
								icon: 'none'
							})
						}
					})
				})
			},
			
			// 分享到微信
			shareImg() {
				console.log('点击分享微信')
				let that = this;
				uni.showShareImageMenu({
					path: that.imagePath,
				})
			},
			handleStartDrawImg() {
				console.log(this.codeimg,"this.codeimg")
				this.template = {
					width: '520px',
					height: '820px',
					background: "#fff",
					borderRadius: '24px',
					views: [
						{
							type: 'image',
							url: 'https://imgs.ynz666.com/test/2025/01/08/YzQzYTI3MjAxYjA4N2VlZTIxN2MzMjliZmEwM2E0YzU=.png',
							mode: 'aspectFit',
							css: {
								top: '0px',
								left: '0px',
								width: '520px',
								height: '820px',
								borderRadius: '24px',
							}
						},
						{
							type: 'image',
							url: this.codeimg,
							mode: 'aspectFit',
							css: {
								top: '300px',
								left: '100px',
								width: '300px',
								height: '300px',
								borderRadius: '50%',
							}
						},
					],
					
				};
			},
			onImgOK(e) {
				console.log(e,"eee")
				this.imagePath = e.detail.path;
			},
			onImgErr(e) {
				console.log(e,"eee2222")
			},
			
		}
	}
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
.pageBox{
	width: 100%;
	padding-bottom: 300rpx;
	.top-background{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 622rpx;
		z-index: -1;
		// background: linear-gradient( #FFD3DB,#fff);
		background: linear-gradient( #FFD3DB,#f9f9f9);
		// background: radial-gradient( 43% 146% at 92% 8%, #FFD3DB 0%, rgba(255,244,243,0) 100%);
		// opacity: 0.5;
		// filter: blur(20rpx);
		border-radius: 0 0 20rpx 20rpx;
	}
	.status_nav {
		width:100vw;
		position:fixed;
		top:0;
		left:0;
		z-index:2;
	}
	
	.backClass {
		background-color: #fff!important;
	}
	//  自定也首页顶部导航
	.Index_tab_top {
		z-index: 3;
		width: 100%;
		display: flex;
		position: fixed;
		left: 0;
		.scan-box {
			margin-left: 30rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #000;
			line-height: 58rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		
			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 4rpx;
			}
		
			view {
				margin-left: 15rpx;
			}
		}
		.title {
			width: 200rpx;
			text-align: center;
			position: absolute;
			left: 50%;margin-left: -100rpx;
			font-size: 32rpx;
			font-weight: bolder;
			color: #333333;
		}
	}


  .information{
		margin: 20rpx 0 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		.dw{
			width: 120rpx;
			height: 52rpx;
			background: rgba(63,31,31,0.76);
			border-radius: 42rpx 0rpx 0rpx 42rpx;
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			.dw_img{
				width: 36rpx;
				height: 36rpx;
			}
			.dw_name{
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				padding-left: 4rpx;
			}
		}
		.left{
			display: flex;
			align-items: center;
			margin-left: 20rpx;
			.img{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
			.detail{
				padding-left: 16rpx;
				.name{
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
				.desc{
					font-size: 22rpx;
					color: #333333;
					padding-top: 8rpx;
				}
			}
		}
		.right{
			font-size: 30rpx;
			color: #333333;
			position: relative;
			margin-right: 20rpx;
			button{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}
	}
	
	
	.identity{
		margin: 28rpx 32rpx 0;
		height: 432rpx;
		position: relative;
		.identity_img{
			width: 100%;
			height: 100%;
			    border-radius: 10rpx;
		}
		.identity_box{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			border-radius: 10rpx;
			.dw{
				padding: 0 20rpx;
				height: 40rpx;
				background: rgba(255,255,255,0.29);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				position: absolute;
				top:30rpx;
				right: 40rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				.text_xhx{
					padding: 0 4rpx;
				}
			}
			.top{
				padding: 48rpx 48rpx 42rpx;
				.top_left{
					display: flex;
					flex-direction: column;
					.name{
						font-weight: 400;
						font-size: 24rpx;
						color: #ABABAB;
					}
					.price{
						font-weight: 400;
						font-size: 36rpx;
						color: #EDCDB9;
						padding-top: 4rpx;
					}
				}
			}
			.cen{
				padding: 0 48rpx 0;
				display: flex;
				// justify-content: space-between;
				.item{
					display: flex;
					flex-direction: column;
					.name{
						font-weight: 400;
						font-size: 24rpx;
						color: #ABABAB;
					}
					.price{
						font-weight: 400;
						font-size: 32rpx;
						color: #EDCDB9;
						padding-top: 4rpx;
					}
				}
				.item:nth-child(1){
					margin-right: 130rpx;
				}
			}
			.fot{
				padding: 42rpx 48rpx 0;
				display: flex;
				justify-content: space-between;
				
				.btn{
					width: 272rpx;
					height: 76rpx;
					background: #EDCDB9;
					border-radius: 44rpx 44rpx 44rpx 44rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.fotT{
				justify-content: center;
			}
		}
	}
	
	.main_one{
		margin: 24rpx 32rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.item{
			width: 330rpx;
			height: 160rpx;
			background: #fff;
			box-shadow: 0rpx 0rpx 38rpx 0rpx rgba(0,0,0,0.02);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			align-items: center;
			.img{
				width: 80rpx;
				height: 80rpx;
				margin-left: 36rpx;
			}
			.left_box{
				padding-left: 20rpx;
				.price{
					font-weight: 600;
					font-size: 36rpx;
					color: #000000;
				}
				.name{
					font-weight: 400;
					font-size: 24rpx;
					color: #727272;
				}
			}
		}
	}
	.main_rule{
		margin: 24rpx 32rpx 0;
		display: flex;
		align-items: center;
		.img{
			width: 100%;
			height: 240rpx;
			border-radius: 16rpx;
		}
	}
	.main_two{
		margin: 24rpx 32rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.item{
			width: 330rpx;
			height: 232rpx;
			position: relative;
			.img{
				width: 330rpx;
				height: 232rpx;
			}
			.item_box{
				width: 330rpx;
				height: 232rpx;
				position: absolute;
				top: 0;
				.name{
					font-weight: 500;
					font-size: 28rpx;
					color: #0075BE;
					padding: 36rpx 0 0 28rpx;
				}
				.nameT{
					color: #CB820C;
				}
				.price{
					display: flex;
					align-items: baseline;
					padding: 10rpx 0 0 28rpx;
					.price_v1{
						font-weight: 400;
						font-size: 28rpx;
						color: #FF5F25;
					}
					.price_v2{
						font-weight: 400;
						font-size: 44rpx;
						color: #FF5F25;
					}
				}
				.desc{
					padding: 14rpx 0 0 28rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #727272;
				}
			}
		}
	}
	.main_thr{
		margin: 24rpx 32rpx 0;
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		padding: 28rpx 40rpx;
		.item{
			display: flex;
			align-items: center;
			.img{
				width: 40rpx;
				height: 40rpx;
			}
			.name{
				font-weight: 400;
				font-size: 24rpx;
				color: #424242;
				padding-left: 16rpx;
			}
		}
		.item:nth-child(2),.item:nth-child(4){
			padding-left: 138rpx;
		}
		.item:nth-child(3),.item:nth-child(4){
			padding-top: 40rpx;
		}
	}
	
	
	
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.85);
		z-index: 10000;
		.mask_box{
			width: 520rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-65%);
			left: 50%;
			margin-left: -260rpx;
			height: 820rpx;
			.poster {
				width: 520rpx;
				position: absolute;
				top: 0;
			}
			.down_box1{
				width: 520rpx;
				position: absolute;
				bottom: -118rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.box_btn1{
					width: 240rpx;
					height: 90rpx;
					background: linear-gradient( 102deg, #FEE1DB 0%, #FFF9F7 100%);
					border-radius: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					text {
						font-size: 30rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: rgba(58, 49, 52, 1);
					}
					
					button {
						width: 200rpx;
						height: 78rpx;
						border-radius: 50rpx;
						position: absolute;
						top: 0;
						opacity: 0;
						border: 1rpx solid red;
					}
				}
				.box_btn2{
					width: 240rpx;
					height: 90rpx;
					background: linear-gradient( 315deg, #FFA44F 0%, #FF2D29 100%);
					box-shadow: inset 0rpx 2rpx 16rpx 0rpx rgba(255,255,255,0.5);
					border-radius: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
			.fot{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: -200rpx;
				.img{
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
	
		
		
	
		.down-box {
			position: fixed;
			width: 100vw;
			bottom: 0;
			left: 0;
			background-color: #fff;
			border-radius: 44rpx 44rpx 0 0;
			padding: 60rpx 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #333333;
	
			image {
				margin-bottom: 8rpx;
				width: 58rpx;
				height: 58rpx;
				border-radius: 50%;
			}
		}
	}
	
	
	
	.mask_Verify{
			width: 100vw;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 100;
			background-color: rgba(0, 0, 0, 0.65);
				
			.maskFour_box {
				width: 604rpx;
				overflow: hidden;
				position: absolute;
				top: 50%;
				transform: translateY(-60%);
				left: 50%;
				margin-left: -302rpx;
				border-radius: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.bj_box{
					background: #fff;
					width: 604rpx;
					height: 358rpx;
					position: relative;
					.free_img {
						width: 604rpx;
						height: 358rpx;
					}
					.box{
						width: 604rpx;
						height: 358rpx;
						position: absolute;
						top: 0;
						display: flex;
						flex-direction: column;
						align-items: center;
						.box_title{
							font-family: PingFangSC, PingFang SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #181818;
							padding-top: 40rpx;
						}
						.box_con{
							font-weight: 400;
							font-size: 28rpx;
							color: #232323;
							line-height: 40rpx;
							margin: 20rpx 76rpx 0;
						}
						.box_font{
							margin: 44rpx 0 0;
							width: 540rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.btn{
								width: 252rpx;
								height: 82rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
							.btn1{
								background: #FFFFFF;
								border-radius: 42rpx;
								border: 2rpx solid #DEDEDE;
								font-weight: bold;
								font-size: 30rpx;
								color: #181818;
							}
							.btn2{
								background: linear-gradient( 225deg, #FE4602 0%, #FF8414 100%);
								border-radius: 42rpx;
								border: 2rpx solid #FF8414;
								font-weight: bold;
								font-size: 30rpx;
								color: #FFFFFF;
							}
						}
					}
				}
			}
		}
}



.rulemask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	
		background-color: rgba(0, 0, 0, 0.65);
	
		
		.ruleModal_box {
			width: 648rpx;
			height: 855rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -331rpx;
			.fri_img{
				width: 648rpx;
				height: 855rpx;
			}
			.fri_box{
				width: 648rpx;
				height: 855rpx;
				position: absolute;
				top: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				.top {
					width: 100%;
					height: 164rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					font-weight: bold;
				}
				.bot{
					height: 590rpx;
					background: #fff;
					border-radius: 16rpx;
					overflow-y: auto;
					padding: 0 24rpx;
					line-height: 50rpx;
					font-size: 24rpx;
				}
				
			}
			
			.fot {
				position: absolute;
				height: 80rpx;
				bottom: -140rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.img{
					width: 63rpx;
					height: 63rpx;
				}
			}
	
			
		}
	
		.nomral-modal {
			text-align: center;
			width: 600rpx;
			padding-bottom: 48rpx;
			overflow: hidden;
	
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -300rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
	
			.bg-top {
				width: 51%;
				height: 165rpx;
				background: #FA6400;
				top: 0;
				border-radius: 0 0 0% 80%;
				position: absolute;
				z-index: -1;
			}
	
			.left {
				left: 0;
			}
	
			.right {
				right: 0;
				border-radius: 0 0 80% 0% !important;
			}
	
			image {
				width: 170rpx;
				height: 170rpx;
				display: block;
				margin: 0 auto;
				margin-top: 54rpx;
				z-index: 1;
				margin-bottom: 14rpx;
			}
	
			.nomral-txt {
				width: 482rpx;
				text-align: center;
				margin: 0 auto;
				font-size: 28rpx;
				font-weight: bold;
				color: #141414;
				line-height: 50rpx;
			}
	
			.modal-btn {
				background-color: #FA6400;
			}
	
			.nomral-title {
				font-size: 28rpx;
				color: #141414;
				line-height: 40rpx;
			}
	
			.nomral-vip {
				font-size: 38rpx;
				font-weight: bold;
				color: #141414;
				line-height: 54rpx;
			}
	
			.nomral-btn {
				margin: 0 auto;
				margin-top: 54rpx;
			}
	
			.nomral-tip {
				text-align: center;
				width: 424rpx;
				margin: 0 auto;
				font-size: 20rpx;
				color: #666666;
				line-height: 28rpx;
				margin-top: 14rpx;
			}
	
			.modalBtnAll {
				margin: 54rpx 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.btnLeft {
					width: 260rpx;
					background-color: #FA6400;
					height: 88rpx;
					border-radius: 44rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 88rpx;
				}
	
				.btnRight {
					width: 260rpx;
					background-color: #FA6400;
					height: 88rpx;
					border-radius: 44rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 88rpx;
				}
			}
		}
	}
</style>
